<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j component-input-number">
    <div
      class="sub"
      @click="sub"
    >
      -
    </div>
    <input
      v-model="number"
      class="input"
      type="number"
      @change="changeInput"
    >
    <div
      class="add"
      @click="add"
    >
      +
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
  modelValue: {
    type: Number,
    default: 0
  },
  max: {
    type: Number,
    default: 1000000
  },
  min: {
    type: Number,
    default: 0
  }
})
const emits = defineEmits(['update:modelValue'])

const number = ref(props.modelValue)

const add = () => {
  if (number.value > props.max) {
    return
  }
  number.value++
  emits('update:modelValue', number.value)
}
const sub = () => {
  if (number.value <= props.min) {
    return
  }
  number.value--
  emits('update:modelValue', number.value)
}
const changeInput = () => {
  emits('update:modelValue', Number(number.value))
}

</script>

<style lang="scss" scoped>
.component-input-number {
  display: flex;
  .input {
  width: 40px;
  height: 25px;
  border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
  border-left: none;
  border-right: none;
  text-align: center;
}
  .sub,
  .add {
  width: 25px;
  height: 25px;
  border: 1px solid #DDDDDD;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #AAAAAA;
  font-size: 20px;
  user-select:none;
}
}

</style>
